<template>
    <sub-box v-loading="loading">
        <breadcrumb :title="'历史版本'"></breadcrumb>
        <div class="resourceInfoBox mt20 white-block" v-if="resourceInfo">
            <p>资源信息</p>
            <div class="resourceInfo">
                <div class="p">
                    <p>
                        {{resName}}
                    </p>
                    <span>资料来源：{{resSourceDept}}</span>
                </div>
            </div>
            <div class="checkMsg">
                <div class="check1" v-for="item in checkList" :key="item.id">
                    <!--                    <el-checkbox v-model="item.checked" :disabled="disabled">-->
                    {{item.ename}}
                    <!--                    </el-checkbox>-->
                </div>
            </div>
        </div>
        <div class="white-block mt20" v-if="table">
            <table-example :data="resTable" :tableColumn="header" class="mt20">
            </table-example>
        </div>
        <div class="box-th white-block mt20" v-if="detail&&resDetail">
            <div class="form-common clearfix">
                <div class="form-item" v-if="detail.selfSysParam&&detail.selfSysParam[0]&&detail.selfSysParam[0].id">
                    <div class="form-item-label">绑定应用</div>
                    <div class="form-item-content">
                        <div v-for="(list,index) in detail.selfSysParam" :key="index">
                            <div>{{list.sysName}}</div>
                            <div>
                                <!--                                唯一代码：{{list.sysCode}};-->
                                IP地址：{{list.ip}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-item" v-if="dataOrigin">
                    <div class="form-item-label">数据源</div>
                    <div class="form-item-content">
                        <p>{{rdDbDict.dbDesc}}</p>
                        <p>ip地址：{{rdDbDict.dbIp}}</p>
                        <p>端口：{{rdDbDict.dbPort}}</p>
                        <p>数据库名称：{{rdDbDict.dbName}}</p>
                        <p>服务器类型：{{rdDbDict.dbType}}</p>
                        <p>用户名：{{rdDbDict.dbUser}}</p>
                        <p>密码：{{rdDbDict.dbPasswd}}</p>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item-label">申请机构</div>
                    <div class="form-item-content">{{resDetail.applyDeptName}}</div>
                </div>
                <div class="form-item">
                    <div class="form-item-label">申请人</div>
                    <div class="form-item-content">{{resDetail.applyUserName||resDetail.userName}}</div>
                </div>
                <div class="form-item">
                    <div class="form-item-label">联系人</div>
                    <div class="form-item-content">{{resDetail.contactName}}</div>
                </div>
                <div class="form-item">
                    <div class="form-item-label">联系电话</div>
                    <div class="form-item-content">{{resDetail.contactTel}}</div>
                </div>
                <div class="form-item">
                    <div class="form-item-label">申请说明</div>
                    <div class="form-item-content">{{resDetail.remark}}</div>
                </div>
                <div class="form-item">
                    <div class="form-item-label">相关文件</div>
                    <div class="form-item-content">
                        <div v-for="(list,index) in resDetail.fileInfo" :key="index">
                            <i class="el-icon-document"></i>{{list.fileName}}
                            <a :href="list.path" target="_blank" class="ml20">
                                <el-button type="primary" size="mini">下载</el-button>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </sub-box>
</template>

<script>
    import subBox from '../../components/layout/layout-sub'
    import breadcrumb from '../../components/breadcrumb'
    import tableExample from '../../components/table'

    export default {
        data() {
            return {
                header: [
                    {
                        prop: 'resName',
                        label: '名称',
                        minWidth: '50%',
                        align: 'center'
                    },
                    {
                        prop: 'resSourceDept',
                        label: '提供单位',
                        minWidth: '50%',
                        align: 'center'
                    }
                ],
                versionNo: '',
                orderNo: '',
                detail: null,
                loading: false,
                versionNum: '',
                applyNumChild: '',
                offLine: false,
                resDetail: null,
                resTable: [],
                id: '',
                resName: '',
                resSourceDept: '',
                checkList: [],
                resourceInfo: false,
                table: false,
                dataOrigin: false,
                rdDbDict: null,
                disabled: false
            }
        },
        mounted() {
            if (this.$route.query.applyNumChild) this.applyNumChild = this.$route.query.applyNumChild
            if (this.$route.query.versionNum) this.versionNum = this.$route.query.versionNum
            if (this.$route.query.offLine) this.offLine = JSON.parse(this.$route.query.offLine)
            if (this.$route.query.id) this.id = this.$route.query.id
            // if (this.$route.query.rdDbDict) this.rdDbDict = this.$route.query.rdDbDict
            // if (this.$route.query.checkList) this.checkList = this.$route.query.checkList
            // if (this.$route.query.detail) this.resDetail = this.$route.query.detail
            this.getDetail()
        },
        methods: {
            // 获取历史版本数据
            getDetail() {
                let url = '/rdResourceApplicationDetail/selectResHistory'
                if (this.offLine) url = '/rdResForOnline/selectNotOnlineHistory'
                this.loading = true
                this.$http.get(url, {
                    applyNumChild: this.applyNumChild,
                    versionNum: this.versionNum
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.detail = result.data
                        // this.rdDbDict = result.data.rdDbDict
                        this.resDetail = result.data.resDetailParam || result.data.onlineParam
                        this.collectionSituation = result.data.dirParam.collectionSituation || result.data.dirParam[0].collectionSituation || result.data.resDirParam.collectionSituation
                        this.resName = this.resDetail.resName
                        this.resSourceDept = result.data.dirParam.resSourceDept || result.data.dirParam[0].resSourceDept || result.data.resDirParam.resSourceDept
                        if (this.resDetail.resType === 3) {
                            if (this.collectionSituation === 1) {
                                this.disabled = true
                                this.table = false
                                this.resourceInfo = true
                                this.dataOrigin = true
                                this.rdDbDict = result.data.rdDbDict || result.data[0].rdDbDict
                                this.checkList = result.data.dbAppsParam
                            } else {
                                this.table = true
                                this.resourceInfo = false
                                this.dataOrigin = false
                            }
                        } else {
                            this.table = true
                            this.resourceInfo = false
                        }
                        // if (this.offLine) {
                        //     this.resTable.push(result.data.dirParam[0])
                        // } else {
                        if (result.data.dirParam.length === 0) {
                            this.resTable.push(result.data.dirParam)
                        } else {
                            this.resTable.push(result.data.dirParam[0] || result.data.resDirParam || result.data.dirParam)
                        }
                        // }
                    }
                }).catch(() => {
                    this.loading = false
                })
            }
        },
        components: {
            breadcrumb,
            tableExample,
            subBox
        }
    }
</script>
<style scoped lang="less">
    .resourceInfoBox {
        .resourceInfo {
            background-color: #eee;
            padding: 20px;
            margin-top: 20px;
            /*padding-top: 20px;*/

            .p {
                color: #444;
                border-bottom: 1px solid #ccc;

                p {
                    color: #444;
                    font-size: 18px;
                }

                span {
                    line-height: 30px;
                }
            }
        }

        .checkMsg {
            background-color: #eee;
            padding: 20px;
            padding-top: 0;

            .check1 {
                width: 200px;
                line-height: 40px;
                display: inline-block;
            }
        }
    }

    .box-th {

        .title {
            overflow: hidden;
            line-height: 30px;

            span {
                padding: 10px;
                float: left;
                color: #999;
                font-size: 16px;
            }

            .p {
                float: left;
                margin-left: 40px;
                font-size: 16px;
                padding: 10px;
            }

            .people {
                margin-left: 60px;

            }

            .btn {
                border-radius: 0;
                margin-left: 20px;
            }
        }

    }
</style>
